<script setup>
import { computed, onMounted, ref, watch } from "vue";
import { useRouter, useRoute } from "vue-router";
import { AxiosError } from "axios";
import { ElMessage } from "element-plus";
import useAuthStore from "@/stores/auth";
import { storeToRefs } from "pinia";
import personalCenterService from '@/services/personal-center.service';
import { Search, Refresh, Plus, Edit, Delete, View, Upload, Download, Share, Close } from "@element-plus/icons-vue";

const router = useRouter();

const authStore = useAuthStore();
const { userProfile } = storeToRefs(authStore);
const saveLoading = ref(false);

const entity = ref({});

const load = async () => {
    try {
        const profile = await personalCenterService.retrieve();
        authStore.setUserProfile(profile);
        entity.value = {
            ...profile.user
        };
    } catch (err) {
        if (err instanceof AxiosError) {
            const msg = err.response?.data?.message || err.message;
            ElMessage({ message: msg, type: "error" });
        }
        throw err;
    } finally {
    }
};

const save = async () => {
    try {
        saveLoading.value = true;
        await personalCenterService.update(entity.value);
        load();
        ElMessage({
            message: "保存成功", type: "success"
        });
    } catch (err) {
        if (err instanceof AxiosError) {
            const msg = err.response?.data?.message || err.message;
            ElMessage({ message: msg, type: "error" });
        }
        throw err;
    } finally {
        saveLoading.value = false;
    }
}

const uploadAvatar = async (options) => {
    return personalCenterService.updateAvatar(options.file);
};

const onUploadAvatarSuccess = async () => {
    await load();
}

const clickChangePassword = () => {
    router.push("/change-password");
}

onMounted(async () => {
    await load();
});
</script>

<template>
    <ElForm v-model="entity" label-width="120px" class="form">
        <ElFormItem label="头像">
            <ElUpload action="" :show-file-list="false" list-type="picture-card" :http-request="uploadAvatar"
                :on-success="onUploadAvatarSuccess">
                <ElImage v-if="entity.avatar" :src="entity.avatar" />
                <ElIcon v-else>
                    <Plus />
                </ElIcon>
            </ElUpload>
        </ElFormItem>
        <ElFormItem label="用户名">
            <ElInput v-model="entity.username" readonly></ElInput>
        </ElFormItem>
        <ElFormItem label="昵称">
            <ElInput v-model="entity.nickname"></ElInput>
        </ElFormItem>
        <ElFormItem label="部门">
            <ElInput :value="userProfile?.department?.name" readonly></ElInput>
        </ElFormItem>
        <ElFormItem label="岗位">
            <ElInput :value="userProfile?.positions?.map(it => it.name).join(',')" readonly></ElInput>
        </ElFormItem>
        <ElFormItem label="角色">
            <ElInput :value="userProfile?.roles?.map(it => it.name).join(',')"></ElInput>
        </ElFormItem>
        <ElFormItem label="邮箱">
            <ElInput v-model="entity.email"></ElInput>
        </ElFormItem>
        <ElFormItem label="手机号">
            <ElInput v-model="entity.phone"></ElInput>
        </ElFormItem>
        <ElFormItem label="真实姓名">
            <ElInput v-model="entity.realName"></ElInput>
        </ElFormItem>
        <ElFormItem label="生日">
            <ElDatePicker class="w-full" v-model="entity.birthday" type="date" format="YYYY-MM-DD"
                value-format="YYYY-MM-DD HH:mm:ss" />
        </ElFormItem>
        <ElFormItem label="个人介绍">
            <ElInput v-model="entity.introduce"></ElInput>
        </ElFormItem>
        <ElFormItem>
            <ElButton type="primary" :loading="saveLoading" @click="save()">保存</ElButton>
            <ElButton type="primary" link @click="clickChangePassword()">修改密码</ElButton>
        </ElFormItem>
    </ElForm>
</template>

<style scoped>
.form {
    max-width: 460px;
}
</style>